import {defZFormFieldCom, } from "../render.js";
import {resolveEventsToTemplate} from "../cm-field-core";
import {baseSelectMixin, createWatchMixin} from "../mixins";


defZFormFieldCom('CusInput', {
  create(propConfig,props,extData) {
    let eventTpl = resolveEventsToTemplate(propConfig)
    let subType = ZY.lodash.get(propConfig, 'ui.widgetConfig.subType')
    let minNum = ZY.lodash.get(propConfig, 'ui.widgetConfig.min')
    // console.log(eventTpl)
    // console.log(subType)
    let ret = {
      template: `<el-input v-model="value"
            @keypress.native="onKeyPress"
            @keydown.native="onKeyDown"     
            @keyup.native="onKeyUp"                           
            @input="zfield__onInput"
            v-bind="ui.widgetConfig"
            ${eventTpl}
  ></el-input>`,
      mixins: [

      ],
      data() {
        return {
          subType,
          minNum,
          value: undefined,
          rules: propConfig.rules,
          ui: propConfig.ui,
          ...extData,
          needClear: false
        }
      },
      methods: {
        onKeyUp() {
          // console.log(' this.needClear', this.needClear)
          if ( this.needClear) {
            this.$nextTick(() => {
              this.needClear = false
              // console.log(this.value)
              // this.zfield__setVal(0)
            })
          }
        },
        onKeyDown(e) {
          if (this.subType) {
            if (this.subType === 'integer') {
              let ret = true
              if (e.code === 'Minus') {
                ret = false
              }

              // console.log('onKeyDown', e, ret)
              if (!ret) {
                // e.preventDefault();
                // e.stopPropagation();
                this.needClear = true
              }
            }
          }
        },
        onKeyPress(e) {
          let FLAG = ZY.rid()
          if (this.subType) {
            if (this.subType === 'integer') {
              let ret = (e.charCode === 8 || e.charCode === 0 || e.charCode === 13) ? FLAG : (e.charCode >= 48 && e.charCode <= 57);
              // console.log('onKeyPress', e, ret)
              if (e.code === 'Minus') {
                // ret = true
                if (typeof this.minNum === 'undefined' || this.minNum < 0) {
                  ret = true
                }
              }

              if (!ret) {
                e.preventDefault();
                e.stopPropagation();
              }

            }
          }
          return true
        }
      }
    }
    if (subType === 'integer') {

    }

    return ret
  }
})

defZFormFieldCom('CusInputNumber', {
  create(propConfig) {
    return {
      template: `<el-input type="number" v-model.number="value" 
        @input="onInputNumber" v-bind="ui.widgetConfig"></el-input>`,
      mixins: [

      ],
      data() {
        return {
          value: undefined,
          ui: propConfig.ui,
        }
      },
      methods:{
        onInputNumber(e) {
          let v = parseFloat(e);
          if (Number.isNaN(v)) {
            this.zfield__onInput('')
          }
          this.zfield__onInput(v)
        }
      }
    }
  }
})

defZFormFieldCom('CusTextarea', {
  create(propConfig) {
    return {
      template: '<el-input v-model="value" @input="zfield__onInput" v-bind="ui.widgetConfig"></el-input>',
      mixins: [

      ],
      data() {
        return {
          value: undefined,
          ui: propConfig.ui,
        }
      }
    }
  }
})

defZFormFieldCom('CusRate', {
  create(propConfig) {
    return {
      template: `
        <el-rate
            v-model="value"
            @change="zfield__onInput"
            v-bind="ui.widgetConfig"
        >
        </el-rate>`,
      mixins: [
      ],
      data() {
        return {
          value: undefined,
          ui: propConfig.ui,
        }
      }
    }
  }
})

defZFormFieldCom('CusSlider', {
  create(propConfig) {
    return {
      template: `
        <el-slider
            v-model="value"
            @change="zfield__onInput"
            v-bind="ui.widgetConfig"
        >
        </el-slider>
      `,
      mixins: [

      ],
      data() {
        return {
          value: undefined,
          ui: propConfig.ui,
        }
      }
    }
  }
})

defZFormFieldCom('CusDateTimePicker', {
  create(propConfig) {
    // console.log(propConfig)
    return {
      template: `
        <el-date-picker
            type="datetime"
            v-model="value"
            @change="zfield__onInput"
            v-bind="ui.widgetConfig"
        >
        </el-date-picker>`,
      data() {
        let w = propConfig.ui.widgetConfig;
        w.valueFormat = 'yyyy-MM-dd HH:mm:ss'
        // console.log(w)
        return {
          widgetConfig: w,
          value: undefined,
          ui: propConfig.ui,
        }
      },
    }
  }
});

defZFormFieldCom('CusTimePicker', {
  create(propConfig) {
    // console.log(propConfig)
    return {
      template: `
        <el-time-picker
            v-model="value"
            @change="zfield__onInput"
            v-bind="ui.widgetConfig"
        >
        </el-time-picker>`,
      mixins: [

      ],
      data() {
        return {
          value: undefined,
          ui: propConfig.ui,
        }
      }
    }
  }
});


defZFormFieldCom('CusCheckbox', {
  create(propConfig) {
    return {
      template: `
        <el-checkbox-group
            v-model="value"
            @change="zfield__onInput"
            v-bind="ui.widgetConfig"
        >
        <el-checkbox v-for="(option, key) in zfeild__buildOptions(ui, reqOptions)"
                     :label="option.value"
          >{{option.label}}</el-checkbox>
        </el-checkbox-group>
      `,
      mixins: [
        baseSelectMixin
      ],
      data() {
        return {
          ui: propConfig.ui,
          value: [],
        }
      },
      async created() {
        await this.initDataSource()
      },
      // beforeCreate() {
      //   console.log(this.value)
      // },
      methods: {

      }
    }
  }
})

defZFormFieldCom('CusRadio', {
  create(propConfig) {
    return {
      template: `
        <el-radio-group
            v-model="value"
            @change="zfield__onInput"
            v-bind="ui.widgetConfig"
        >
        <el-radio v-for="(option, key) in zfeild__buildOptions(ui, reqOptions)"
                     :label="option.value"
        >{{option.label}}</el-radio>
        </el-radio-group>
      `,
      mixins: [
        baseSelectMixin
      ],
      data() {
        return {
          ui: propConfig.ui,
          value: undefined,
        }
      },
      async created() {
        await this.initDataSource()
      },
      methods: {

      }
    }
  }
});

defZFormFieldCom('CusSelect', {
  create(propConfig,props,extData) {
    let watchMixin = createWatchMixin(propConfig, props)
    return {
      template: `
        <el-select
            v-model="value"
            @change="onSelectChange"
            v-bind="ui.widgetConfig"
        >
        <el-option v-for="(option, key) in zfeild__buildOptions(ui, reqOptions)"
                     :label="option.label"
                     :value="option.value"
        ></el-option>
        </el-select>
      `,
      mixins: [
        baseSelectMixin,
        watchMixin
      ],
      data() {
        return {
          ui: propConfig.ui,
          propConfig,
          value: undefined,
        }
      },
      async created() {
        // let self = this;
        // // console.log(this.zfield__highConfig)
        // await this.zfield__initDataSource({
        //   onRequest(apiConfig) {
        //     self.onRequest(apiConfig)
        //   }
        // })
        let canAutoUpload = await this.installWatchUpdate();
        // console.log(canAutoUpload)
        await ZY.sleep(100);
        if (canAutoUpload) {
          await this.initDataSource()
        }
      },
      beforeUnMount() {
        this.unInstallWatchUpdate()
      },
      methods: {
        getOptions() {
          return this.zfeild__buildOptions(this.ui, this.reqOptions)
        },
        getCurOption() {
          let options = this.getOptions();
          if (Array.isArray(options)) {
            let option = options.find(v => {
              return v.value === this.value
            });
            return option
          }
        },
        async initOptions() {
          let self = this
          let zFormMeta = globalThis.ZForm.getZFormMeta(this)
          let api = ZY.lodash.get(this.ui, 'widgetConfig.api')
          if (api) {
            // console.log(api)
            this.reqOptions = await this.zfield__req(zFormMeta,{
              event: 'init:options',
              options: {
                api,
                propConfig: self.propConfig,
                props
              }
            })
            // console.log(this.reqOptions)
          }
        },
        onSelectChange(v) {
          let zFormMeta = globalThis.ZForm.getZFormMeta(this)
          // console.log(zFormMeta)
          if (zFormMeta?.events && zFormMeta.events['select:change']) {
            zFormMeta?.events['select:change']({
              value: v, self_path: props.self_path, props, curFormCon: this.curFormCon});
          }
          this.zfield__onInput(v)
        }
      }
    }
  }
});

defZFormFieldCom('CusCascader', {
  create(propConfig) {
    return {
      template: `
        <el-cascader
            v-model="value"
            @change="zfield__onInput"
            v-bind="ui.widgetConfig"
            :options="zfeild__buildOptions(ui)"
        >
        </el-cascader>
      `,
      mixins: [

      ],
      data() {
        return {
          ui: propConfig.ui,
          value: undefined,
        }
      },
      methods: {
        getOptions() {
          return this.zfeild__buildOptions(this.ui)
        }
      }
    }
  }
})

// defZFormFieldCom('CusUploader', {
//   create(propConfig) {
//     return {
//       template: `
//         <el-upload
//             v-model="value"
//             @change="zfield__onInput"
//             v-bind="ui.widgetConfig"
//             :options="zfeild__buildOptions(ui)"
//         >
//           <el-button size="small" type="primary">点击上传</el-button>
//         </el-upload>
//       `,
//       mixins: [
//
//       ],
//       data() {
//         return {
//           ui: propConfig.ui,
//           value: undefined,
//         }
//       },
//
//       methods: {
//
//       }
//     }
//   }
// })
